<template>
  <div class="in-block">
    <div class="title">数据解析</div>
    <el-form ref="hkFormRef" :model="ruleForm" label-width="120px" label-position="left" :rules="rules">
      <div class="btn-wk">
        <el-button v-for="(i,index) in wayData" :key="index" :class="[ruleForm.type==i.field?'active-btn':'','custom-btn']" @click="hancdleChangeWay(i.field)">{{ i.label }}</el-button>
      </div>
      <el-row :gutter="20" class="hk-flex">
        <el-col v-if="ruleForm.type" :span="23">
          <el-form-item label="原始日志" prop="context">
            <el-input v-model="ruleForm.context" type="textarea" :rows="6" placeholder="请输入原始日志" maxlength="5000" @change="handleChangeContext" />
          </el-form-item>
        </el-col>
        <el-col v-if="ruleForm.type == 'json'" :span="1">
          <el-button size="mini" type="primary" @click="handleCheck()">解析</el-button>
        </el-col>
      </el-row>
      <el-row v-if="ruleForm.type == 'grok'" :gutter="20" class="hk-flex">
        <el-col :span="23">
          <el-form-item key="ruleContext" label="GROK表达式" prop="ruleContext">
            <el-input v-model="ruleForm.ruleContext" type="textarea" :rows="6" placeholder="请输入GROK表达式" maxlength="5000" @change="handleChangeContext" />
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-button size="mini" type="primary" @click="handleCheck()">解析</el-button>
        </el-col>
      </el-row>
      <el-row v-if="isCheck" :gutter="20">
        <el-form-item label="解析代码">
          <logicalJudg
            ref="logicalJudgRef"
            :relation-data="relationData"
            :field-obj="searchFormObj"
            :context-list="contextList"
            @addConditions="addConditions"
            @addGroup="addGroup"
          />
        <!-- @handleChange="handleChange" -->
        </el-form-item>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { getDictList, loglist } from '@/api/milkyway/accessRules'
import logicalJudg from '@/components/Common/logicalJudg'
export default {
  name: 'Step2',
  components: { logicalJudg },
  props: {
    step2Data: {
      type: Object,
      default() {
        return { type: 'grok' }
      }
    },
    echoTableData: {
      type: Array,
      default() {
        return []
      }
    },
    isCheck: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      wayData: [
        { field: 'grok', label: '正则解析' },
        { field: 'json', label: 'JSON解析' }
      ],
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择解析规则类型', trigger: 'blur' }],
        save: [{ required: true, message: '请选择存储策略', trigger: 'blur' }],
        context: [{ required: true, message: '请输入原始日志', trigger: 'blur' }],
        ruleContext: [
          { required: true, message: '请输入GROK表达式', trigger: 'blur' }
        ]
      },
      //  逻辑判断
      searchFormObj: {
        fieldList: [
          // 第一个下拉框
          {
            type: 'select',
            field: 'contextValue',
            list: 'contextList'
          },
          // 第二个下拉框
          {
            type: 'select',
            field: 'operators',
            list: 'operatorsList'
          },
          // 第三个下拉框
          {
            type: 'input',
            field: 'matchValue',
            hidden: false
          }
        ],
        searchData: {},
        listTypeInfo: {
          contextList: [],
          operatorsList: []
        }
      },
      tableData: [],
      contextList: [],
      relationData: {
        flag: 'and',
        subSyntaxExpressnList: []
      }
    }
  },
  computed: {
    ruleForm: {
      get() {
        return this.step2Data
      }
    }
  },
  watch: {
    echoTableData: {
      handler(newVal) {
        if (newVal.length > 0) {
          if (this.isCheck) {
            const list = newVal.map((i) => {
              return { label: i.columnName, value: i.columnValue }
            })
            this.contextList = list
            this.relationData = this.ruleForm.relationDatas
          }
        }
      }
    }
  },
  mounted() {
    this.getDictList()
  },
  methods: {
    //  切换数据解析模式
    hancdleChangeWay(type) {
      this.ruleForm.type = type
      this.$emit('update:isCheck', false)
    },
    // 改变原始日志 或grok的值
    handleChangeContext() {
      this.$emit('update:isCheck', false)
    },
    /** 校验 */
    handleCheck() {
      if (this.ruleForm.type == 'grok') {
        if (!this.ruleForm.context || !this.ruleForm.ruleContext) {
          this.$message.error('原始日志和GRPK表达式不能为空')
          return
        }
      }
      loglist({
        type: this.ruleForm.type,
        context: this.ruleForm.context,
        ruleContext: this.ruleForm.ruleContext
      }).then((res) => {
        this.isValidate = true
        this.$message.success('校验成功')
        this.$emit('update:isCheck', true)
        const list = res.map((i) => {
          return { label: i.columnName, value: i.columnValue }
        })
        this.tableData = res
        this.searchFormObj.listTypeInfo.contextList = list
        this.contextList = list
        this.$emit('handleCheck', { tableData: this.tableData, contextList: this.contextList })
      })
    },

    /** 表单触发的事件 */
    // handleChange(data) {},
    /** 获取字典数据 */
    getDictList() {
      getDictList('ruleExpression').then((res) => {
        const lists = res.map((i) => {
          return { label: i.itemLabel, value: i.itemVale }
        })
        this.searchFormObj.listTypeInfo.operatorsList = lists
      })
    },
    /**  */
    addConditions(data) {
      this.relationData.subSyntaxExpressnList[data].expressionVoList.push({
        contextValue: '',
        matchValue: '',
        operators: '',
        variable: ''
      })
    },
    /** 添加組 */
    addGroup() {
      this.relationData.subSyntaxExpressnList.push({
        expressionVoList: [
          {
            contextValue: '',
            matchValue: '',
            operators: '',
            variable: ''
          }
        ],
        flag: ' or '
      })
    },
    /** 必填项校验 */
    handleSubmit() {
      return new Promise((resolve) => {
        this.$refs.hkFormRef.validate((valid) => {
          if (valid) {
            resolve(this.ruleForm)
          } else {
            this.$message.error('请完善表单')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item{
  margin-bottom:0 !important;
}
.btn-wk{
  width:225px;
  margin-bottom:20px;
}
.el-row{
  margin-bottom:20px;
}
.hk-flex{
  align-items: flex-end;
}
</style>
